<script lang="ts" setup>
import type { Exposed, OpenCallback, OpenData } from './type'
import { useRowSelection } from '@/hooks/useRowSelection'
import { useInstStore } from '@/stores'
import { defaultTableProps } from '@/utils/comp-setting'
import { warn } from '@/utils/helper'
import { Input, Modal, Table, type TableColumnType } from 'ant-design-vue'
import { computed, onMounted, ref, toValue } from 'vue'

defineOptions({
  name: 'CourseCategoryModal',
})
const instStore = useInstStore()
const open = ref(false)
const currentJump = ref<Nullable<OpenData>>()
const currentJumpCallback = ref<Nullable<OpenCallback>>()
const keyword = ref<string>('')
const { rowSelection, clearSelectedRowKeys } = useRowSelection()
const dataSource = computed(() => {
  if (!instStore.jumpData || !instStore.jumpData.courseCategorys) 
    return []
  return instStore.jumpData.courseCategorys.filter((l) => {
    return ~l.label!.search(keyword.value)
  })
})
const columns: TableColumnType[] = [
  {
    dataIndex: 'label',
    key: 'label',
    title: '课程分类',
  },
]
defineExpose<Exposed>({
  async open(_data, _callback) {
    currentJump.value = _data
    currentJumpCallback.value = _callback
    if (currentJump.value.length > 0) {
      rowSelection.value!.selectedRowKeys = currentJump.value.map(l => l.value)
    }
    open.value = true
  },
})
onMounted(async () => {
  await instStore.loadJumpData()
})
function handleCancel() {
  const callback = toValue(currentJumpCallback)
  if (callback) {
    callback({
      applied: false,
      value: null,
    })
  }
  cleanUp()
}
function cleanUp() {
  open.value = false
  currentJump.value = null
  currentJumpCallback.value = null
  clearSelectedRowKeys()
}
function handleOk() {
  const jumpValue = toValue(currentJump)
  const callback = toValue(currentJumpCallback)
  if (!jumpValue || !callback) {
    warn('[CourseCategoryModal] jumpValue 或 callback 缺失')
    return handleCancel()
  }
  callback({
    applied: true,
    value: getSelectedRows(),
  })
  cleanUp()
}
function getSelectedRows() {
  const result: OpenData = []
  const keys = rowSelection.value?.selectedRowKeys
  const courseCategorys = instStore.jumpData?.courseCategorys
  if (!keys || keys.length === 0 || !courseCategorys || courseCategorys.length === 0) {
    return result
  }
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const find = courseCategorys.find(l => l.value === key)
    if (find) {
      // @ts-ignore
      result.push({
        ...find,
      })
    }
  }
  return result
}
</script>

<template>
  <Modal v-model:open="open" title="课程类别" :width="922" @cancel="handleCancel" @ok="handleOk">
    <div class="flex flex-row box-border">
      <div class="flex-1 w-0 box-border pl-4 pt-5">
        <!-- 课程类别 -->
        <div class="box-border">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.courseCategorys?.length }}个类别</div>
            <Input v-model:value="keyword" placeholder="输入要搜索的内容" style="width: 240px;">
              <template #suffix>
                <i class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer" />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <Table
              v-bind="defaultTableProps" :loading="instStore.jumpDataLoading" :columns="columns" :data-source="dataSource" :pagination="false"
              :row-selection="rowSelection" row-key="value"
            />
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>
